<template>
  <div class="container">
    <Bread />
    <div class="main edition-heart">
      <div class="left">
        <div class="box1">
          <img :src="userInfos.headImg" alt="" />
          <span>{{ userInfos.nickName }} ：{{ userInfos.coin }}分</span>
        </div>
        <div class="box2">
          <div class="box2-title">
            <img src="../../../public/images/transaction.png" alt="" />
            <span>交易管理</span>
          </div>
          <ul>
            <li
              v-for="item in list1"
              :key="item.title"
              @click="router.push(item.href)"
              :class="{ active: route.path.includes(item.href) }"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
        <div class="box3">
          <div class="box3-title">
            <img src="../../../public/images/img01.png" alt="" />
            <span>个人信息管理</span>
          </div>
          <ul>
            <li
              v-for="item in list2"
              :key="item.title"
              @click="router.push(item.href)"
              :class="{ active: route.path.includes(item.href) }"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import Bread from '../../components/bread/bread.vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const { userInfos } = inject('data') as { userInfos: any }

// 交易管理
const list1 = [
  { title: '账号管理', href: '/user/center' },
  { title: '我的订单', href: '/user/order' },
  { title: '购物车', href: '/user/cart' },
  { title: '消息通知', href: '/user/message' },
  { title: '积分明细', href: '/user/detail' },
  { title: '积分攻略', href: '/user/attack' },
]

// 个人信息管理
const list2 = [
  { title: '地址管理', href: '/user/address' },
  { title: '账号安全', href: '/user/safe' },
]
</script>

<style lang="less" scoped>
.container {
  background-color: #f5f5f5;
  padding-bottom: 50px;
  .main {
    display: flex;
    justify-content: space-between;
    .left {
      width: 200px;
      height: 740px;
      background: #e7e7e7;
      display: flex;
      flex-direction: column;
      padding-top: 30px;
      box-sizing: border-box;
      margin-right: 60px;
      .box1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          display: inline-block;
          margin-top: 20px;
        }
      }
      .box2,
      .box3 {
        padding-left: 18px;

        .box2-title,
        .box3-title {
          display: flex;
          align-items: center;
          span {
            padding-left: 6px;
          }
        }
        ul {
          li {
            margin-top: 17px;
            color: #666666;
            cursor: pointer;
            font-weight: 300;
            font-size: 14px;
          }
          .active {
            border-left: 2px solid #0a328e;
            padding-left: 10px;
            color: #0a328e;
            font-weight: bold;
          }
        }
      }

      .box2 {
        padding-top: 43px;
      }
      .box3 {
        padding-top: 36px;
      }
    }
    .right {
      width: 900px;
    }
  }
}
</style>
